<template>
  <view class="city-explore-page">
    <scroll-view 
      class="scroll-container" 
      scroll-y 
      enable-back-to-top
    >
      <swiper 
        class="top-swiper" 
        autoplay 
        interval="3000" 
        circular 
        indicator-dots
      >
        <swiper-item>
          <image class="swiper-img" src="/static/quanzhou2.png" mode="widthFix"></image>
        </swiper-item>
        <swiper-item>
          <image class="swiper-img" src="/static/quanzhou2.png" mode="widthFix"></image>
        </swiper-item>
        <swiper-item>
          <image class="swiper-img" src="/static/quanzhou3.png" mode="widthFix"></image>
        </swiper-item>
      </swiper>

      <view class="section city-intro">
        <view class="section-title">城市介绍</view>
        <rich-text :nodes="introContent"></rich-text>
      </view>

      <view class="section explore-progress">
        <view class="section-title">探索进度</view>
        <view class="progress-wrap">
          <progress 
            percent="60" 
            show-info 
            stroke-width="6" 
            activeColor="#2C82FF"
          ></progress>
        </view>
      </view>

      <view class="section city-picker">
        <view class="section-title">选择目标城市</view>
        <picker 
          mode="region" 
          @change="onCityChange" 
          :value="selectedCity"
        >
          <view class="picker-input">
            {{ selectedCity[0] }} - {{ selectedCity[1] }} - {{ selectedCity[2] }}
          </view>
        </picker>
      </view>

      <view class="section preference-setting">
        <view class="section-title">偏好设置</view>
        
        <view class="preference-item">
          <view class="item-label">出行方式：</view>
          <radio-group @change="onTravelModeChange" class="radio-group">
            <label class="radio-label">
              <radio value="bus" checked />公交
            </label>
            <label class="radio-label">
              <radio value="drive" />自驾
            </label>
            <label class="radio-label">
              <radio value="walk" />步行
            </label>
          </radio-group>
        </view>

        <view class="preference-item">
          <view class="item-label">显示推荐景点：</view>
          <switch 
            @change="onShowScenicChange" 
            checked 
            color="#2C82FF"
          ></switch>
        </view>

        <view class="preference-item slider-item">
          <view class="item-label">探索半径：{{ radius }} km</view>
          <slider 
            @change="onRadiusChange" 
            min="1" 
            max="20" 
            value="5" 
            step="1" 
            activeColor="#2C82FF"
          ></slider>
        </view>
      </view>

      <view class="section city-video">
        <view class="section-title">城市宣传</view>
        <video 
          class="city-video-player" 
          :src="videoUrl" 
          controls 
          poster="/static/video-cover.jpg"
          objectFit="cover"
        ></video>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      introContent: [
        {
          name: 'p',
          attrs: { style: 'margin: 10rpx 0;' },
          children: [
            { type: 'text', text: '这是一座充满活力的现代化都市，' },
            { 
              name: 'span', 
              attrs: { style: 'font-weight: bold; color: #2C82FF;' },
              children: [{ type: 'text', text: '既有深厚的历史文化底蕴' }]
            },
            { type: 'text', text: '，又有前沿的科技发展活力。' }
          ]
        },
        {
          name: 'p',
          attrs: { style: 'margin: 10rpx 0;' },
          children: [
            { type: 'text', text: '这里四季分明，景点众多，无论是古色古香的历史街区，还是现代感十足的摩天大楼，都能让你感受到独特的城市魅力。' }
          ]
        }
      ],
      selectedCity: ['福建省', '泉州市', '丰泽区'],
      radius: 5,
      videoUrl: 'https://tv.sohu.com/v/cGwvNzA1MDgzNC84MzQ1MzA1NS5zaHRtbA==.html'
    };
  },
  methods: {
    onCityChange(e) {
      this.selectedCity = e.detail.value;
     },
     onTravelModeChange(e) {
       console.log('当前选择的出行方式：', e.detail.value);
     },
     onShowScenicChange(e) {
       console.log('是否显示推荐景点：', e.detail.value);
     },
     onRadiusChange(e) {
       this.radius = e.detail.value;
     }
   }
 };
 </script>
 <style scoped>
 .city-explore-page {
   width: 100%;
   background-color: #f5f5f5;
 }
 .scroll-container {
   width: 100%;
   min-height: 100vh;
   padding-bottom: 20rpx;
 }
 .top-swiper {
   width: 100%;
   height: 300rpx;
 }
 .swiper-img {
   width: 100%;
   height: 100%;
 }
 .section {
   width: 90%;
   margin: 30rpx auto;
   padding: 20rpx;
   background-color: #fff;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 }
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
   color: #333;
   margin-bottom: 20rpx;
   border-left: 8rpx solid #2C82FF;
   padding-left: 16rpx;
 }
 .city-intro {
   line-height: 48rpx;
   font-size: 28rpx;
   color: #666;
 }
 .progress-wrap {
   width: 100%;
   padding: 10rpx 0;
 }
 .picker-input {
   width: 100%;
   height: 60rpx;
   line-height: 60rpx;
   border: 2rpx solid #eee;
   border-radius: 8rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
   color: #666;
 }
 .preference-item {
   display: flex;
   align-items: center;
   margin-bottom: 30rpx;
   font-size: 28rpx;
   color: #666;
 }
 .item-label {
   width: 220rpx;
   color: #333;
 }
 .radio-group {
   display: flex;
   gap: 40rpx;
 }
 .radio-label {
   display: flex;
   align-items: center;
   gap: 8rpx;
 }
 .slider-item {
   flex-direction: column;
   align-items: flex-start;
   gap: 10rpx;
 }
 .city-video-player {
   width: 100%;
   height: 300rpx;
   border-radius: 8rpx;
 }
 </style>